<template>
  <div class="phones-list">
    <ul>
      <li v-on:click='emitNumber(index)' class="phone online-icon" v-for="(item,index) in datas" :class="{online:item.status === 1,offline:item.status === 0}">
        <div class="icon"><span class="text">{{index+1}}</span></div>
        <div class="phone-device">
            <span>{{todevice(item)}}</span>
        </div>
        <div class="phone-state clearfix">
          <div class="phone-name">{{item.user}}</div>
          <div class="state">{{item.status === 0 ? '离线':'在线'}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'phoneList',
  props: {
    datas: {}
  },
  data () {
    return {
      phones: [
        {
          name: '工程部平板',
          type: 1,
          status: 1,
          user: '闲置',
          location: {
            lng: 0,
            lat: 0
          }
        },
        {
          name: '工程部平板',
          type: 2,
          status: 0,
          user: '闲置',
          location: {
            lng: 0,
            lat: 0
          }
        },
        {
          name: '工程部平板',
          type: 2,
          status: 1,
          user: '闲置',
          location: {
            lng: 0,
            lat: 0
          }
        },
        {
          name: '工程部平板',
          type: 1,
          status: 0,
          user: '闲置',
          location: {
            lng: 0,
            lat: 0
          }
        }
      ]
    }
  },
  methods: {
    todevice (device) {
      let type = device.type === 1 ? '平板' : '手机'
      return `${device.name} (${type})`
    },
    emitNumber (index) {
      this.$emit('dot', index)
    }
  }
}
</script>
<style lang="stylus" scope>
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1;
}
.phones-list{
  padding:0px 15px;
  box-sizing: border-box;
  .phone{
    padding:10px 10px 10px 50px;
    cursor: pointer;
    border-bottom:1px solid #444;
    position:relative;
    .icon{
      position:absolute;
      top:10px;
      left:0px;
      width:32px;
      height:32px;
      .text{
        text-align:center;
        line-height:18px;
        position:absolute;
        width:14px;
        height:18px;
        top:6px;
        left:9px;
      }
    }
    .phone-device{
      font-size: 14px;
      color: #CCCCCC;
      line-height: 26px;
    }
    .phone-state{
      line-height:20px;
      font-size: 12px;
      color: #999999;
      .phone-name{
        width:180px;
        float:left
      }
      .state{
        width:50px;
        float:right;
        padding-left:19px;
        box-sizing: border-box;

      }
    }
  }
  .online{
     .icon{
        background: url('../../../../assets/images/u46.png') no-repeat;
        .text{
          background:rgb(0,153,0);
        }
     }
     .state{
      background: url('../../../../assets/images/u42.png') no-repeat left center;
     }
  }
  .offline{
    .icon{
       background: url('../../../../assets/images/u44.png') no-repeat;
       .text{
          background:rgb(112,112,112);
        }
    }
    .state{
      background: url('../../../../assets/images/u97.png') no-repeat left center;
    }
  }
}
</style>
